<template>
    <div class="app-container">
        医院设置添加
        <el-form :model="hospitalSet" label-width="120px">
            <el-form-item label="医院名称">
                <el-input v-model="hospitalSet.hosname" />
            </el-form-item>
            <el-form-item label="医院编号">
                <el-input v-model="hospitalSet.hoscode" />
            </el-form-item>
            <el-form-item label="api基础路径">
                <el-input v-model="hospitalSet.apiUrl" />
            </el-form-item>
            <el-form-item label="联系人姓名">
                <el-input v-model="hospitalSet.contactsName" />
            </el-form-item>
            <el-form-item label="联系人手机">
                <el-input v-model="hospitalSet.contactsPhone" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="saveOrUpdate">保存</el-button>
            </el-form-item>
        </el-form>
    </div>

</template>

<script>
    import hospSet from '@/api/hospSet';

    export default {
        data() {
            return {
                hospitalSet: {}     // 更新记录---JSON
            }
        },
        //页面渲染之前
        created() {
            // ----因为已在路由中定义如下内容：path: 'edit/:id'，因此可以使用 this.$route.params.id 获取路由中的id----
            if (this.$route.params && this.$route.params.id) {
                //（1）获取路由ID值。
                const id = this.$route.params.id;
                //（2）调用get()接口，获取要修改的record信息
                this.getHospSetByID(id);
            } else {
                // vue-router导航切换 时，如果 “两个路由” 都渲染 “同个组件”，
                // 组件的生命周期方法（created或者mounted）不会再被调用, 组件会被重用，显示上一个路由渲染出来的自建
                // 解决方案：可以简单的在 router-view上加上一个唯一的key，来保证路由切换时都会重新触发生命周期方法，确保组件被重新初始化。
                // 修改 src/views/layout/components/AppMain.vue 文件
            }
        },
        methods: {
            save() {
                hospSet.create(this.hospitalSet)
                    .then(res => {
                        //提示
                        console.log(this.hospitalSet)
                        this.$message({
                            type: 'success',
                            message: '添加，成功!'
                        })
                        //---重新加载---
                        this.$router.push({ path: '/hospSet/list' })
                    }).catch(error => {
                        // console.log("error", error);
                        alert(error);
                    });
            },
            getHospSetByID(id) {
                hospSet.getBuID(id)
                    .then(res => {
                        // ---页面渲染之前，数据“回显”---
                        this.hospitalSet = res.data;
                    })
                    .catch(error => {
                        alert(error);
                    })
            },
            update() {
                hospSet.update(this.hospitalSet)
                    .then(res => {
                        //提示
                        console.log(this.hospitalSet)
                        this.$message({
                            type: 'success',
                            message: '修改，成功!'
                        })
                        //---重新加载---
                        this.$router.push({ path: '/hospSet/list' })
                    }).catch(error => {
                        // console.log("error", error);
                        alert(error);
                    });
            },

            saveOrUpdate() {
                if (this.hospitalSet.id) {
                    this.update();
                } else {
                    this.save();
                }
            }
        }
    }
</script>


<style scoped>

</style>